<template>
	<view class="pk-detail-con">
		<i class="lightning" :style="{ left: line+ '%' }"></i>
		<i class="acimgs" :style="{ left: line+ '%' }"></i>
		<view class="progress">
			<view class="progress-bar" :style="{ width: line + '%'}"></view>
			<span class="team-name team-l">{{ pkData.left }}</span>
			<span class="team-name team-r">{{ pkData.right }}</span>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pk-bar",
		props:{
			// pk数据
			pkData:{
				type:Object,
				default:()=>({})
			},
		},
		data() {
			return {
				line:50,
			};
		},
		mounted() {
				let {	left,	right	} = this.pkData;
				if (left >= right) {
					this.line = (left /(right + left) * 100 ).toFixed(2);
				} else {
					this.line = (100 - (right / (right + left) * 100)).toFixed(2);
				}
		}
	}
</script>

<style lang="less">
.pk-detail-con {
		position: relative;
		margin: 50rpx auto 40rpx;
	}

	.progress {
		width: 100%;
		height: 60rpx;
		overflow: hidden;
		border-radius: 30rpx;
		background: linear-gradient(-142deg, #00EEFE, #8000DC);
	}

	.progress-bar {
		position: relative;
		height: 60rpx;
		text-align: left;
		background: linear-gradient(-135deg, #E21AAE, #FF216D);
		
	}

	.progress,
	.progress-bar {
		position: relative;
	}

	.lightning {
		position: absolute;
		top: -40rpx;
		z-index: 9;
		width: 70rpx;
		height: 140rpx;
		float: right;
		margin-right: -12rpx;
		background: url("./progress.png") no-repeat center;
		background-size: cover;
		transform: translateX(-20rpx);
	}
	.acimgs{
		position: absolute;
		bottom:0;
		width: 58rpx;
		height: 60rpx;
		z-index: 9;
		background: linear-gradient(-135deg, #E21AAE, #E21AAE);
		clip-path: polygon(0 0, 70% 0, 25% 100%, 0% 100%);
		transform: translateX(-10rpx);
	}
	.team-name {
		position: absolute;
		top: 0;
		line-height: 60rpx;
		color: #f3eee1;
		letter-spacing: 1rpx;
		font-size: 24rpx;
	}

	.team-l {
		left: 23rpx;
	}

	.team-r {
		right: 23rpx;
	}

</style>
